<h4>
  Visualizations
  <img class="oppia-help" src="/images/help.png" ui-jq="tooltip"
       title="These visualizations show how the exploration's states are linked. You can access each state's editor by clicking on its node.">
</h4>


<ul class="nav nav-tabs">
  <li class="active"><a href="#graph" data-toggle="tab">Graph</a></li>
  <li><a href="#tree" data-toggle="tab">Tree</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="graph">
    <div ng-controller="EditorGraph">
      {% include 'editor/add_state.html' %}
      <state-graph-viz val="graphData" grouped="grouped">
      </state-graph-viz>
    </div>
  </div>
  <div class="tab-pane" id="tree">
    <div ng-controller="EditorTree">
      {% include 'editor/add_state.html' %}
      <state-tree-viz val="treeData" grouped="grouped">
      </state-tree-viz>
    </div>
  </div>
</div>